<script setup lang='ts'>
       import { ref ,onMounted} from 'vue'
       const imgUrl = ref()
const imgList:string[] =[
    "https://img0.baidu.com/it/u=3383325011,2141463052&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1424",
    "https://img2.baidu.com/it/u=1550994497,3671031145&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
    "https://img2.baidu.com/it/u=1550994497,3671031145&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667",
    "https://img1.baidu.com/it/u=423860384,3280578609&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=774",
    "https://img0.baidu.com/it/u=243526948,766074201&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=730",
    "https://img2.baidu.com/it/u=3557682936,3001410273&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667"
] 
onMounted(()=> {
       imgUrl.value = imgList[~~(Math.random()*imgList.length)]
})
</script>
       
<template>
       <div class="container">
<img :src="imgUrl" alt=""><br>
<button @click="imgUrl = imgList[~~(Math.random()*imgList.length)]">随机图片></button>
       </div>
</template>
       
<style scoped>
       .container{
width: 100%;
margin:100px auto;
text-align: center;
       }
       .container img{
width: 300px;
height: 300px;
border-radius: 50%;
       }

</style>